<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>搜索页</title>
</head>
<body>
<div class="mainPadding">    
  	<div id="queryForm">

  	<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="queryForm"> 
  		<el-form-item label="区域" prop="area">
  			<el-input v-model="formInline.area" placeholder="区域"></el-input> '
  		</el-form-item> 
  		<el-form-item label="地址" prop="address"> 
  			<el-input v-model="formInline.address" placeholder="地址"></el-input>
  		</el-form-item> 
  		<el-form-item>
  			<el-button type="primary" @click="onSubmit">查询</el-button>
  		 	<el-button@click="resetForm('queryForm')">重置</el-button> 
  		</el-form-item> 
  	</el-form>


  	</div>


  	<div id="pagination">
  		<template> <el-table :data="tableData3" height="650"
  			style="width: 100%"> <el-table-column prop="area"
  			label="区域" width="180"> </el-table-column> <el-table-column
  			prop="name" label="姓名" width="180"> </el-table-column> <el-table-column
  			prop="address" label="地址"> </el-table-column> </el-table> 
  			</template>

  		<template>
  		<div class="block">
  			<el-pagination @size-change="handleSizeChange"
  				@current-change="handleCurrentChange" :current-page="currentPage"
  				:page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
  				layout="total, sizes, prev, pager, next, jumper" :total="total">
  			</el-pagination>
  		</div>
  		</template>
  	</div>
</div>
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script>
var queryFormVM = new Vue({
    el:'#queryForm',
    data:{
        formInline: {
          area: '',
          address: ''
        }
    },
    methods:{
         onSubmit() {
            console.log('submit!');
            var param = queryFormVM.formInline;
            var pageSize = vm.pageSize;
            var pageNum = vm.pageNum;
            console.info(param);
            axios.post('/crmbase/demo/listTableByPageNum2?pageNum='+pageNum+"&pageSize="+pageSize, param)
            .then(function (response) {
                  var data =  response.data
                  vm.tableData3= data.data;
                  console.info(data);
                  vm.total =  data.total;
                  vm.currentPage = data.currentPage;
            })
            .catch(function (error) {
                 console.log(error);
            });
            
          },
          resetForm(formName) {
              console.info(this.$refs[formName]);
              queryFormVM.$refs[formName].resetFields();
              this.$refs[formName].resetFields();
          }
    }
    
    
});


var vm = new Vue({
   el:'#pagination',
   data:{
       tableData3:[],
       currentPage: 1,
       total:0,
       pageNum:1,
       pageSize:10
   },
   methods:{
       handleSizeChange(val) {
           //下拉框  每页 10,20条切换 调用
              console.log(`每页 ${val} 条`);
           this.pageSize = val;
           this.initTableData(1);
        },
        handleCurrentChange(val) {
            //点击 页码
          console.log(`当前页: ${val}`);
          this.initTableData(val);
        },
        initTableData(pageNum){
            var pageSize = this.pageSize;
            var pageNum = pageNum;
             var param = queryFormVM.formInline;
            axios.post('/demo/listTableByPageNum2?pageNum='+pageNum+"&pageSize="+pageSize,param)
                .then(function (response) {
                    var data =  response.data
                    vm.tableData3= data.data;
                    console.info(data);
                    vm.total =  data.total;
                    vm.currentPage = data.currentPage;
                })
                .catch(function (error) {
                  console.log(error);
                })
                .then(function () {
                  // always executed
                });  
        }
   },
   created(){
       console.info("create method");
       this.initTableData(1);
      
   },
   mounted(){
      console.info("mounted method");
   }
   
});
 
</script>

</html>